/**
 * date:2022/5/23;
 * author:王娟;
 * info:新增构造函数和原型链
 * change:修改了画布
 * 
 */
        //画背景图的构造方法
        function creatC(mycanvas,size){
            this.dom=document.querySelector(mycanvas);
            this.ctx=this.dom.getContext("2d");
            this.size=size;
        }
        //画俄罗斯方块的构造的方法
        function creatB(){
            this.ro=Math.floor(Math.random()*7);
            this.num = Math.floor(Math.random()*4);
            this.point=arr[this.ro][this.num];//数组的使用传两个参数
            this.level=0;//水平移动位置
            this.vetical=0;//垂直移动位置
        }
        //俄罗斯块的原型链
        creatB.prototype= {
            rotate(){
                //定义临时的变量
                let num=this.num+1;
                if(num>=4){
                   num=0;
                }
                
             let point=arr[this.ro][num];
             //判断旋转
                for(let i=0;i<point.length;i++){
                    if(mapArray[point[i].y+this.vetical][point[i].x-this.level] || mapArray[point[i].y+this.vetical][point[i].x-this.level]==undefined){
                        return
                    }
                }
                this.num++
                if(this.num>=4){
                    this.num=0;
                }
                this.point=arr[this.ro][this.num];
            },
            //移动
            move(code){
                if(code==37){
                    for(let i=0;i<this.point.length;i++){
                        if(this.point[i].x-this.level<=0 || mapArray[this.point[i].y+this.vetical][this.point[i].x - this.level-1]){
                            return
                        }
                    } 
                    this.level++;
                }else if(code==39){
                    for(let i=0;i<this.point.length;i++){
                        if(this.point[i].x-this.level>=9 ||mapArray[this.point[i].y+this.vetical][this.point[i].x - this.level+1]){
                            return
                        }
                    }
                    this.level--;
                }else{
                    for(let i=0;i<this.point.length;i++){
                        if(this.point[i].y+this.vetical>=19 || mapArray[this.point[i].y+this.vetical+1][this.point[i].x - this.level]){
                            let  point=this.point;
                        for(let j=0;j<point.length;j++){
                            mapArray[point[j].y+this.vetical][point[j].x-this.level]=true
                        }   
                            block=nextBlock;
                            //游戏结束
                            if(over()){
                               clearInterval(time);
                               alert("游戏结束")
                           }
                            cl();
                            nextBlock = new creatB()
                            can()
                            canvas.NextBlock();
                              return 
                        }
                    
                    }
                    this.vetical++;
                }
              
            }
            
        }
        
        //画盒子的原型链
        creatC.prototype = {
                init(){
                let size=this.size
                this.dom.width=this.size*10 + 200;
                this.dom.height=this.size*20;
                this.Map();
                this.Score();
                this.Next();
                this.Block();
                this.NextBlock();
                time= setInterval(() => {
                    block.move()
                    canvas.Map();
                    canvas.Block();
                }, 600);
            },
            //画布地图
            Map(){
                this.ctx.clearRect(0,0,this.size*10,this.size*20)//清空格子
                let size=this.size
                this.ctx.fillStyle="red";
                xun(this.ctx,size)
            },    
            //分数这个盒子
            Score(){
                this.ctx.clearRect(this.dom.width-180,10,100,120);
                this.ctx.fillStyle="gray";
                this.ctx.rect(this.dom.width-180,10,100,120);
                this.ctx.moveTo(this.dom.width-180,40);//线条起始位置 
                this.ctx.lineTo(this.dom.width-80,40);//线条结束位置
                this.ctx.font = "bold 16px Arial" ;//线条的粗细
                this.ctx.fillText("信息",this.dom.width -145,30)//填充字体
                this.ctx.fillText("等级:一",this.dom.width -170,80);
                this.ctx.fillText("积分:"+count,this.dom.width -170,110)
                this.ctx.stroke()
            },
            //下一个盒子
            Next(){
                this.ctx.fillStyle="gray";
                this.ctx.rect(this.dom.width-180,160,100,120);
                this.ctx.moveTo(this.dom.width-180,190); 
                this.ctx.lineTo(this.dom.width-80,190);
                this.ctx.font="bold 16px Arial";
                this.ctx.fillText("下一个",this.dom.width -155,180)
                this.ctx.stroke();
            },
            //方块格子
            Block(){
                let size=this.size;
                let point=block.point;
                // let r=Math.floor(Math.random()*255)
                // let g=Math.floor(Math.random()*255)
                // let b=Math.floor(Math.random()*255)
                // this.ctx.fillStyle = "rgb("+r+","+g+","+b+")";
                this.ctx.fillStyle="blue"
                for(let i=0;i<point.length;i++){
                    this.ctx.fillRect((point[i].x-block.level)*size+1,(point[i].y+block.vetical)*size+1,size-2,size-2)
                }
            },
        //下一个盒子里面的格子
            NextBlock(){
                this.ctx.beginPath();//重新再画
                this.ctx.clearRect(this.dom.width-180,190,100,90);
                let size=this.size;
                this.ctx.closePath();//清空格子
                let left=this.dom.width-200;
                let top=210;
                let point=nextBlock.point;
                // let r=Math.floor(Math.random()*255)
                // let g=Math.floor(Math.random()*255)
                // let b=Math.floor(Math.random()*255)
                // this.ctx.fillStyle = "rgb("+r+","+g+","+b+")";
                this.ctx.fillStyle="blue"
                drawMap(this.ctx,point,size,left,top);
                
            }
           
    }
         
        document.onkeydown = function(e){
            if(e.keyCode==32){
                block.rotate();
           }
        if(e.keyCode==37 || e.keyCode==39 || e.keyCode==40){
               block.move(e.keyCode)
               
           }
           can()
        }




let arr=[
        
                [
                    [{x:4,y:1},{x:5,y:1},{x:6,y:1},{x:5,y:0}],
                    [{x:4,y:0},{x:4,y:1},{x:4,y:2},{x:5,y:1}],
                    [{x:4,y:0},{x:5,y:0},{x:6,y:0},{x:5,y:1}],
                    [{x:4,y:1},{x:5,y:0},{x:5,y:1},{x:5,y:2}]
    
                ],
                [
                    [{x:3,y:0},{x:4,y:0},{x:5,y:0},{x:6,y:0}],
                    [{x:4,y:0},{x:4,y:1},{x:4,y:2},{x:4,y:3}],
                    [{x:3,y:0},{x:4,y:0},{x:5,y:0},{x:6,y:0}],
                    [{x:4,y:0},{x:4,y:1},{x:4,y:2},{x:4,y:3}],
    
                ],
                [
                    [{x:4,y:0},{x:5,y:0},{x:4,y:1},{x:5,y:1}],
                    [{x:4,y:0},{x:5,y:0},{x:4,y:1},{x:5,y:1}],
                    [{x:4,y:0},{x:5,y:0},{x:4,y:1},{x:5,y:1}],
                    [{x:4,y:0},{x:5,y:0},{x:4,y:1},{x:5,y:1}],
    
                ],
                [
                    [{x:4,y:0},{x:5,y:0},{x:5,y:1},{x:6,y:1}],
                    [{x:4,y:1},{x:4,y:2},{x:5,y:0},{x:5,y:1}],
                    [{x:4,y:0},{x:5,y:0},{x:5,y:1},{x:6,y:1}],
                    [{x:4,y:1},{x:4,y:2},{x:5,y:0},{x:5,y:1}],
    
                ],
                [
                    [{x:4,y:1},{x:5,y:1},{x:5,y:0},{x:6,y:0}],
                    [{x:4,y:0},{x:4,y:1},{x:5,y:1},{x:5,y:2}],
                    [{x:4,y:1},{x:5,y:1},{x:5,y:0},{x:6,y:0}],
                    [{x:4,y:0},{x:4,y:1},{x:5,y:1},{x:5,y:2}],
                ],
                [
                    [{x:4,y:0},{x:4,y:1},{x:5,y:1},{x:6,y:1}],
                    [{x:4,y:0},{x:4,y:1},{x:4,y:2},{x:5,y:0}],
                    [{x:4,y:0},{x:5,y:0},{x:6,y:0},{x:6,y:1}],
                    [{x:4,y:2},{x:5,y:0},{x:5,y:1},{x:5,y:2}],
    
                ],
                [
                    [{x:6,y:0},{x:4,y:1},{x:5,y:1},{x:6,y:1}],
                    [{x:4,y:0},{x:4,y:1},{x:4,y:2},{x:5,y:2}],
                    [{x:4,y:0},{x:5,y:0},{x:6,y:0},{x:4,y:1}],
                    [{x:4,y:0},{x:5,y:0},{x:5,y:1},{x:5,y:2}],
    
                ]                                                                       
            ]
